<head>
  <!-- 1. 引入videojs的CSS。 -->
  <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>

<video id="Video1" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}" muted="muted">
  <source id="source" >
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>


<video id="Video2" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}" muted="muted">
  <source id="source" >
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>


<!-- 2. 引入videojs的JS。 -->
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>

<script>

  /** 3. 执行播放的方法。
   *	videoID：html标准<video>标签的id。
   *	hslUrl：hsl格式视频的地址。
   */
  function videoOne(videoID,hslUrl){
    var src=hslUrl
    var myVideo = videojs(videoID, {
      controls: true,
      autoplay: true,
      playToggle: false,
      preload:"auto",
      poster:"login.png",	//未播放时的预览图片。
      width: 300,
      height: 200
    })
    myVideo.src([
      {type: 'application/x-mpegURL', src:src }
      //如果是mp4
      //{type: 'video/mp4', src:src }
    ])
  }


  //4. 值参使用。
  videoOne('Video1','http://hx0xxx1en.ys7.com/open3235xlive/90xxffd8fac3bb486b83cb1xxxxxxx3f6.m3u8')
  videoOne('Video2','http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8')


</script>

</body>
